<template>
  <navbar title="发现" bgc="#fff" :isShowIcon="false"></navbar>
  <view class="container">
    <view class="item-box" v-for="item in list" :key="item.id">
      <view class="inform">
        <view class="inform-title">{{item.headline}}</view>
        <view class="inform-content item">
          {{item.text}}
        </view>
      </view>
      <view class="body  item">
        <view class="body-header">
          <image src="/static/images/Group48097811@2x.png" mode=""></image>
          <view class="body-header-name">
            <text>价格表 . Excel</text>
            <!-- <text>1.3MB</text> -->
          </view>
        </view>
        <!-- <view class="body-content">
         这里是价格表
       </view> -->
        <view class="download" @click="downLoad(item)">
          <text>下载</text>
        </view>
      </view>
    </view>
    <view class="contact">
      <text class="contact-QQ">在线客服QQ：{{sericeQQ}}</text>
      <text class="contact-phone">在线客服电话：{{servicePhone}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        servicePhone: '',
        sericeQQ: '',
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    },
    onLoad() {
      this.getList()
      this.getcontact()
    },
    methods: {
      async getcontact() {
        const res = await uni.gRequest.get(`/app/config/configKey/service.phone`)
        this.servicePhone = res.msg
        const res2 = await uni.gRequest.get(`/app/config/configKey/service.qq`)
        this.sericeQQ = res.msg
      },
      async getList() {
        this.isLoading = true
        uni.showLoading({
          title: '加载中...'
        })
        const res = await uni.gRequest.get(`/app/news/list`, {
          pageNum: 1,
          pageSize: 10,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.list = [...this.list, ...res.rows] || []
        // 实现分页功能
        this.total = res.total
        this.isLoading = false
        uni.hideLoading()
      },
      downLoad(item) {
        uni.downloadFile({
          url: uni.gRequest.file + item.file,
          success: (res) => {
            if (res.statusCode == 200) {
              uni.saveFile({
                tempFilePath: res.tempFilePath,
                success: function(red) {
                  uni.openDocument({
                    filePath: red.savedFilePath,
                    success: (sus) => {
                      console.log('成功打开')
                    }
                  })
                }
              });
              uni.showToast({
                title: '下载成功',
                icon: 'none',
              })

            }
          },
          fail: function(res) {
            console.log(res.errMsg);
          },
          complete: function(res) {
            if (res.statusCode != 200) {
              uni.showToast({
                title: '下载失败',
                icon: 'error',
              })
            }
          },
          progress: function(res) {
            uni.showToast({
              title: '下载中，请等待',
              icon: 'none',
            })
          }
        })
      },

    },
    // 触底刷新
    onReachBottom() {
      if (this.isLoading) return
      if (this.pageNum * this.pageSize >= this.total) {
        return uni.showToast({
          title: '已加载到底部...',
          duration: 500,
          icon: 'none'
        })
      }
      this.pageNum++
      this.getList()
    }
  }
</script>

<style lang="scss">
  $navbarHeight: 120rpx;

  .container {
    padding: 0 26rpx;
    padding-top: $navbarHeight;
  }

  .item-box {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 5rpx 8rpx;
    margin-top: 20rpx;
  }

  .inform {
    padding-top: 50rpx;

    .inform-title {
      font-size: 26rpx;
      color: #000000;
    }

  }

  .item {
    background: #FFFFFF;
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
  }

  .inform-content {
    font-size: 24rpx;
    color: #333333;
  }

  .body-header {
    display: flex;
    align-items: center;

    image {
      width: 56rpx;
      height: 54rpx;
      margin-right: 14rpx;
    }

    .body-header-name {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 20rpx;
      color: #999999;

      text:first-child {
        font-size: 24rpx;
        color: #000000;
      }
    }

  }

  .body-content {
    margin: 20rpx 0;
    height: 296rpx;
    border: 1rpx solid #DCDCDC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #000000;
  }



  .download {
    margin-top: 100rpx;
    text-align: center;
    margin-bottom: 20rpx;

    text {
      display: inline-block;
      padding: 14rpx 80rpx;
      border: 1rpx solid #DCDCDC;
      font-size: 26rpx;
      color: #000000;
    }
  }

  .contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60rpx 0;

    text {
      font-size: 24rpx;
      color: #666666;
      display: inline-block;
      margin-bottom: 30rpx;
    }
  }
</style>
